<template>
  <view>
    <!--    tab切换 -->
    <u-sticky bg-color="#fff" class="w-full bg-#fff">
      <u-tabs :list="route_category" @click="onClickTabs" />
    </u-sticky>
    <view v-if="!loading">
      <view v-if="list.length > 0">
        <!--    路线列表 -->
        <view v-for="(item, key) in list" :key="key" class="m3 rounded-3 bg-white p3" @click="jump(`/pages/route/content?id=${item.id}`)">
          <view class="relative flex bg-white py2">
            <view class="relative size-120px">
              <u-image
                width="120"
                height="120"
                radius="12"
                :src="item.cover || defaultCover"
              />
              <view class="absolute bottom-0 right-0 rounded bg-#00000040 px2 py1 text-12px text-white">
                <text v-if="item.type === 0">地点</text>
                <text v-if="item.type === 1">环线</text>
                <text v-if="item.type === 2">单程</text>
                <text v-if="item.type === 3">往返</text>
              </view>
            </view>
            <view class="mx3 flex flex-col justify-between" style="width: calc(100% - 120px)">
              <view>
                <view class="truncate text-16px">
                  {{ item.title }}
                </view>
                <view class="mt2 flex items-center text-12px text-gray">
                  长度{{ item.total_distance }}km 用时{{ item.duration }}h
                </view>
                <view class="mt2 flex items-center text-12px text-gray">
                  难度：  <u-rate readonly :value="item.difficulty_score" :count="5" size="12" />
                </view>
                <view class="mt2 text-xs text-gray">
                  <text v-for="(tag, k) in item.tags" :key="k">{{ tag.emoji }}{{ tag.name }} <text v-if="item.tags.length - 1 !== k"> | </text> </text>
                </view>
              </view>
              <view v-if="distance(item)" class="text-xs text-gray">
                <uni-icons type="map-pin-ellipse" /> 距你{{ distance(item) }}km
              </view>
              <view v-else class="text-xs text-gray">
                未知距离
              </view>
            </view>
          </view>
          <view>
            <u-line />
          </view>
          <view class="flex items-center justify-between pt2">
            <view class="flex items-center">
              <view class="mx1 text-xs text-gray">{{ item.visit_count }}人使用</view>
            </view>
            <view>
              <u-button
                shape="circle"
                class="block w-100px"
                size="small"
                :color="buttonColor"
                :text="buttonText"
              />
            </view>
          </view>
        </view>
        <u-loadmore v-if="finish" status="nomore" />
        <u-loadmore v-else status="loadmore" @loadmore="getList()" />
      </view>
      <view v-else class="m-t-20vh">
        <u-empty text="暂无数据" />
      </view>
    </view>
    <!-- 骨架 -->
    <view v-for="(item, key) in 3" v-else :key="key" class="m3 rounded-3 bg-white p3">
      <view class="relative flex bg-white py2">
        <view class="relative size-120px">
          <u-skeleton radius="12" title-height="120px" title-width="120px" />
        </view>
        <view class="mx3 flex flex-col justify-between" style="width: calc(100% - 120px)">
          <view>
            <view>
              <u-skeleton title-width="70%" title-height="30px" :animate="true" />
            </view>
            <view class="m-t-2">
              <u-skeleton title-width="50%" :animate="true" />
            </view>
            <view class="m-t-2">
              <u-skeleton title-width="60%" :animate="true" />
            </view>
          </view>
          <view>
            <u-skeleton />
          </view>
        </view>
      </view>
      <view>
        <u-line />
      </view>
      <view class="flex items-center justify-between pt2">
        <view class="flex items-center">
          <u-skeleton :animate="true" />
        </view>
        <view class="w-100px">
          <u-skeleton class="w-full" title-width="100%" title-height="30px" :animate="true" />
        </view>
      </view>
    </view>
    <!-- 间隔 -->
    <!--    底部菜单 -->
  </view>
</template>

<script>
import { getList } from '~/api/route'
import { getDistance } from '~/composables/usePosition'
import { useAppStore } from '~/stores/app'

export default {
  name: 'DkAppRouteList',
  props: {
    defaultCover: {
      type: String,
      default: 'https://img.yzcdn.cn/vant/cat.jpeg',
    },
    buttonColor: {
      type: String,
      default: '#000',
    },
    buttonText: {
      type: String,
      default: '查看路线',
    },
    pageSize: { type: Number, default: 10 },

  },
  data() {
    return {
      list: [],
      page: 1,
      loading: true,
      total: 0,
      finish: false,
    }
  },
  computed: {
    route_category(){
      return useAppStore().config?.route_category || []
    },
  },
  mounted() {
    this.getList()
  },
  methods: {
    onClickTabs(e){
      this.page = 1
      this.list = []
      this.getList(e.id)
    },
    getList(typeId = 0, page){
      this.page = page || this.page
      getList(this.page, this.pageSize, typeId).then((res) => {
        console.log(res)
        this.total = res.data.total
        this.list = this.list.concat(res.data.list)
        this.loading = false
        this.page++
        if (this.list.length >= this.total || res.data.list.length <= 0){
          this.finish = true
        }
      })
    },
    distance(item){
      const userLocation = this.userLocation
      return getDistance(userLocation.latitude, userLocation.longitude, item.markers[0].latitude, item.markers[0].longitude)
    },
  },
}
</script>

<style>
</style>
